<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用interval 来写动画函数</title>
    <style>
        .zhu {
            position: absolute;
            left: 0px;
            top: 50px;
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        
        .fu {
            position: absolute;
            left: 0px;
            top: 100px;
            width: 100px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <button class="forward">点击我fu会往前走动哦</button>
    <button class="back"> 点击我fu会往后走哦</button>
    <div class="zhu"></div>
    <!-- 必须要将盒子变为定位元素才能将其移动 -->
    <div class="fu">
        <span>fu</span>
    </div>
    <script>
        function tranfer(obj, det) { //用函数来封装，使代码更加的方便
            // var step = Math.ceil((det - obj.offsetLeft) / 10); //步长公式，但是会有小数的情况，我们一般会将其向上取整,用Math函数
            //上面的这个代码，是正数的时候，是向上去整，是负数的是时候是向下去整
            var step = (det - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step); //这是个完整的计算方式
            clearInterval('obj.timer'); //如果不添加这一句，每次点击都会产生一个定时器，这样他的移动速度会变得很快，这一步是清楚他的效果
            obj.timer = setInterval(function() { //将传过来的数据变为一个对像里的值，这样会节省空间
                if (obj.offsetLeft == det) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.left = obj.offsetLeft + step + 'px'; //将加的距离变为步长
                }
            }, 50)
        }
        var zhu = document.querySelector('.zhu');
        tranfer(zhu, 400);

        var btnforward = document.querySelector('.forward');
        var btnback = document.querySelector('.back');
        var fu = document.querySelector('.fu');
        btnback.addEventListener('click', function() {
            tranfer(fu, 300);
        })
        btnforward.addEventListener('click', function() {
            tranfer(fu, 500);
        });

        //匀速运动的话就原来值加上想要移动的值、
        //缓速移动的话，就原来的值加上缓动步长
    </script>
</body>

</html>